<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" 	uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="tiles" 	uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c"		uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page language="java" pageEncoding="utf-8"%>

<script type="text/javascript">
$(document).ready(function(){
	setMenuSelection("clienti");
	
    $("#btPersonsList").kendoButton({icon: "funnel"});

    $("#btPersonsCard").kendoButton({icon: "plus"});
	
    $("#btApplyFilter").kendoButton({icon: "tick"});

    $("#btResetFilter").kendoButton({icon: "cancel"});
    
    
	var grid =  $("#gridPersonsList").kendoGrid({
    	dataSource : {
            type     : "json",
            transport: {
                read: "json/listRegPersons"
            },
            //schema   : {data: ""}
            schema: {
				model: {
                    id:"id",
					fields: {
						idnp: 		{ type: "string" },
						lastName: 	{ type: "string" },
						firstName: 	{ type: "string" },
						phoneMob: 	{ type: "string" },
						emal: 		{ type: "string" },
						skype: 		{ type: "string" },
						ocupatia:	{ type: "string" }
					}
				}
			}
        },
        columns: [
				{
					field:"id",  							
					title: "#",
					width: 40,
					hidden: true
				},
          		{	
					field:"idnp",  						
					title: "Cod personal",
					sortable: true,
					width: 80 , 
					template: renderIdnp
				},
                {field: "lastName", 					title: "Familie", 					width: 100},
                {field: "firstName", 					title: "Nume", 						width: 100},
                {field: "phoneMob", 					title: "Telefon mobil", 			width: 90},
                {field: "emal", 						title: "E-mail", 				width: 120},
                {field: "skype", 						title: "Skype", 				width: 90},
                {field: "ocupatia", 					title: "Ocupatia", 				width: 90}
          ],
          height: 500,
          sortable: true,
          pageable: {
        	  pageSize: 20,
        	  pageSizes: [20,40,60],
        	  refresh: true
          },
          dataBound: function(e){
              var grid = this;
				var dataSource = this.dataSource;
              
				var state = kendo.stringify({
					page: dataSource.page(),
					pageSize: dataSource.pageSize(),
					sort: dataSource.sort(),
					group: dataSource.group(),
					filter: dataSource.filter()
				});
              
				$.cookie("gridPersonsListState",state);
              if($.cookie('empRows')){
                  $.each(JSON.parse($.cookie('empRows')),function(){                        
                      var item = dataSource.get(this);
                      var row = grid.tbody.find('[data-uid='+item.uid+']');
                      row.addClass('k-state-selected');
                  })
              }
			},
          change:function(){
              var grid = this;
              var ids = grid.select().map(function(){
                 return grid.dataItem($(this)).id
              }).toArray();
              $.cookie('empRows',JSON.stringify(ids));                    
          }

    }).data("kendoGrid");   
    
    /* ---------------------------------------------------- */
	var state = JSON.parse($.cookie("gridPersonsListState"));
	if(state){
		if(state.filter){
			parseFilterDates(state.filter, grid.dataSource.options.schema.model.fields);					
		}
        grid.dataSource.query(state);
	}
	else{
		grid.dataSource.read();
	}
	/* ---------------------------------------------------- */
    
	function  renderIdnp (dataItem, b, c) {
		return "<a href='adaugaClientiPersoana?pId="+dataItem.id + "'>" + kendo.htmlEncode(dataItem.idnp) + "</a>"; 
	};    
    
	function  renderCompanyName(dataItem) {
		var result  = "";
		if (dataItem.regCompanies) {
			result = dataItem.regCompanies.companyName;
		}
		return result; 
	}; 
	

});

/* ---------------------------------------------------- */
function parseFilterDates(filter, fields){
	if(filter.filters){
		for(var i = 0; i < filter.filters.length; i++){
			parseFilterDates(filter.filters[i], fields);
		}
	}
	else{
		if(fields[filter.field].type == "date"){
			filter.value = kendo.parseDate(filter.value);
		}
	}
}
/* ---------------------------------------------------- */

function btApplyClick(){
	$("#gridPersonsList").data("kendoGrid").dataSource.read();
	$("#gridPersonsList").data("kendoGrid").refresh();
};

function btResetClick(){
	
};

</script>
<CENTER>
<p style="text-align: left;">
	<button id="btPersonsList" type="button" onclick="javascript:window.open('vizualizeazaClientiPersoana', target='_self')";>Lista persoanelor fizice</button>
	<button id="btPersonsCard" type="button" onclick="javascript:window.open('adaugaClientiPersoana', 		target='_self')";>Adaugă persoană fizică</button>
	<c:if test="${errorMessage != '' &&  errorMessage != '0'}">
		<span id="errorMessage" class="errorMessage"> ${errorMessage} </span>
	</c:if>
</p>
<!-- <div id="tabPersonsListFilters" style="text-align: left; font-size: 12px;" class="k-block k-shadow" ><div class="k-header">Parametrii de cautare</div> -->
<!-- 	<table style="width: 100%; border: 1px;" border="0" > -->
<!-- 			<tr> -->
<!-- 				<td style="width: 100px;">IDNP</td> -->
<!-- 				<td style="width: 200px;">Prenume</td> -->
<!-- 				<td style="width: 200px;">Nume</td> -->
<!-- 				<td>						Compania</td> -->
<!-- 			</tr> -->
<!-- 			<tr> -->
<!-- 				<td><input id='fIdnp' 			name='fIdnp' 		type='text' value='' class="k-textbox" style="width: 100px;"></td> -->
<!-- 				<td><input id='fPrenume' 		name='fPrenume' 	type='text' value='' class="k-textbox" style="width: 200px;"></td> -->
<!-- 				<td><input id='fNume' 			name='fNume' 		type='text' value='' class="k-textbox" style="width: 200px;"></td> -->
<!-- 				<td><input id='fOrganizatie' 	name='fOrganizatie'	type='text' value='' class="k-textbox" style="width: 300px;"></td> -->
<!-- 			</tr> -->
<!-- 		</table> -->
<!-- 		<p style="text-align: right;"> -->
<!-- 				<button id="btApplyFilter" type="button"	onclick="btApplyClick()" >Aplica</button> -->
<!-- 				<button id="btResetFilter" type="button" 	onclick="btResetClick()" >Curata</button>			 -->
<!-- 		</p>		 -->
<!-- </div> -->
<div id="gridPersonsList"></div>

</center>




